<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>逃生地图</title>
	<style type="text/css">
		.map{
			margin-top:50px;
			margin-left: 100px;
		}
		table{
			border:solid 0.1px #555;
		}
		table td{
			width: 15px;
			height: 15px;
			border:solid 1px #555;
		}
		.wall{
			background-color: #000;
		}
		.infrared{
			background-color: #111;
		}
		.smoky{
			background-color: #222;
		}
		.flame{
			background-color: #333;
		}
	</style>

	<script src="__PUBLIC__/js/jquery.min.js"></script>

</head>
<body>

	<div id="map" class="map">
		<table id="mapContent" cellpadding="0px" cellspacing="0px"></table>
	</div>
	
</body>
<script type="text/javascript">

	$(document).ready(function() {
		//墙
		var wallCo = ['0000','0001','0002','0003','0004','0005','0006','00034','00035','00036','00037','00038','00039','00040','0100','0104','0106','01034','01036','01040','0200','0206','02034','02040','0300','0304','0306','03034','03036','03040','0400','0401','0402','0403','0404','0406','0407','0408','0409','04010','04011','04012','04013','04014','04015','04016','04017','04018','04019','04021','04022','04023','04024','04025','04026','04027','04028','04029','04030','04031','04032','04033','04034','04036','04037','04038','04039','04040','0500','0504','0506','05010','05014','05018','05019','05021','05022','05026','05030','05034','05036','05040','0600','0604','0606','06010','06014','06018','06019','06021','06022','06026','06030','06034','06036','06040','0700','0706','07010','07014','07018','07019','07021','07022','07026','07030','07034','07040','0800','0804','0806','0807','0809','08010','08011','08013','08014','08015','08017','08018','08019','08021','08022','08023','08025','08026','08027','08029','08030','08031','08033','08034','08036','08040','0900','0904','09036','09040',
		'01000','01001','01002','01003','01004','01006','01007','01008','01009','010010','010011','010012','010013','010014','010015','010016','010017','010018','010019','010021','010022','010023','010024','010025','010026','010027','010028','010029','010030','010031','010032','010033','010034','010036','010037','010038','010039','010040','01104','01106','011034','011036','01204','01206','012034','012036'];
		//人体红外
		// var infraredCo = ['0101','0501','0507','05011','05015','05023','05027','05031','01037','05037'];
		//烟雾
		// var smokyCo = ['0103','01039','0503','0507','05013','05017','05025','05029','05033','05039'];
		
		//火焰
		var flameCo = ['0301','0901','0707','07011','07015','07023','07027','07031','07037','09037','0405','04035'];

		for(var i = 0;i < 17;i++){
			var colsContent = "<tr id='tr"+i+"'></tr>";
			$("#mapContent").append(colsContent);
			for(var j = 0;j < 41;j++){
				var rc = "0"+i+"0"+j;
				var rowsContent = "<td id='"+rc+"'></td>";

				var wallContent = "<td id='"+rc+"' class='wall'></td>";
				var infraredContent = "<td id='"+rc+"' class='infrared'></td>";
				var smokyContent = "<td id='"+rc+"' class='smoky'></td>";
				var flameContent = "<td id='"+rc+"' class='flame'></td>";


				var tdStatus = 0;
				//判断这个格子是否是墙
				for(var k = 0;k < wallCo.length;k++){
					// var rcInt = parseInt(rc);
					if(rc == wallCo[k]){
						tdStatus = 1;
						break;
					}
				}
				//判断这个格子是否是人体红外
				// for(var k = 0;k < infraredCo.length;k++){
				// 	// var rcInt = parseInt(rc);
				// 	if(rc == infraredCo[k]){
				// 		tdStatus = 2;
				// 		break;
				// 	}
				// }
				//判断这个格子是否是烟雾
				// for(var k = 0;k < smokyCo.length;k++){
				// 	// var rcInt = parseInt(rc);
				// 	if(rc == smokyCo[k]){
				// 		tdStatus = 3;
				// 		break;
				// 	}
				// }
				//判断这个格子是否是火焰
				for(var k = 0;k < flameCo.length;k++){
					// var rcInt = parseInt(rc);
					if(rc == flameCo[k]){
						tdStatus = 4;
						break;
					}
				}
				if(tdStatus == 1){
					$("#tr"+i).append(wallContent);
				}else if(tdStatus == 2){
					$("#tr"+i).append(infraredContent);
				}else if(tdStatus == 3){
					$("#tr"+i).append(smokyContent);
				}else if(tdStatus == 4){
					$("#tr"+i).append(flameContent);
				}else{
					$("#tr"+i).append(rowsContent);
				}
				
			}
		}
	});
	function loadDetail(){
		
	}

</script>
</html>